import { Input } from 'antd';
import { useContext, useEffect, useState } from 'react';
import { Select } from '../../baseComponent';
import { ModalContext } from '../../functionalComponent';
import { Layout, iup } from '../../util';

interface IProps {
  approvalPointsData: any;
  statisticsApprovalPoint?: any;
  callBack?: (data: Array<any>) => void;
  cancelBack?: Function;
  view?: Boolean | undefined;
}
/**
 * 审批要点内容配置
 * @constructor
 * @param props
 */
export function WFApprovalPoints(props: IProps) {
  const mCtx = useContext(ModalContext);

  const { approvalPointsData, statisticsApprovalPoint, callBack, cancelBack, view } = props;
  const [data, setData] = useState(iup.deepCopy(approvalPointsData));

  const riskeLevelListInit = ['无风险', '低', '中', '高'];
  const onDetailsChange = (record, index) => {
    let newData = iup.deepCopy(data);
    newData[index].riskLevel = record ? record.value : '';
    newData[index].optionValue = record ? record.label : '';
    setData(newData);
  };
  useEffect(() => {
    mCtx.ins.setApi({
      invokeOkHandler: async () => {
        if (!view) {
          const requiredState = data.some((i) => !i.riskLevel); //判断一下是不是有必填项没填
          if (requiredState) {
            iup.alert('请选择必填项');
            return;
          } else {
            await callBack?.(data);
          }
        }
        mCtx.ins?.destroy();
      },
      invokeCancelHandler: async () => {
        if (!view) {
          await cancelBack?.();
        }
        mCtx.ins?.destroy();
      }
    });
  }, [data]);
  return (
    <Layout style={{ padding: '5px 12px' }}>
      {data.length > 0
        ? data.map((i, index) => (
            <Layout.Flex key={i.id} style={{ paddingTop: '10px' }}>
              <div>
                <span>{index + 1}.</span>
                <span style={{ fontSize: '14px' }}>{i.name}</span>
              </div>
              <div style={{ fontSize: '14px', margin: '10px 0 15px 10px' }}>
                <span>{i.description}</span>
              </div>
              <div>
                <span
                  style={{
                    marginRight: '4px',
                    color: '#f5222d',
                    fontSize: '14px'
                  }}
                >
                  *
                </span>
                <Select
                  defaultValue={i.inspectType !== 1 ? i.details[0].riskLevel : null}
                  disabled={i.inspectType !== 1 || !!view}
                  style={{ width: '140px' }}
                  options={i.details.map((j) => ({ value: j.riskLevel, label: j.optionValue }))}
                  onChange={(value) => {
                    onDetailsChange(value, index);
                  }}
                  placeholder="请选择"
                ></Select>
                <Input
                  disabled={true}
                  value={i.inspectType !== 1 ? i.details[0].riskLevel : riskeLevelListInit[data[index].riskLevel - 1]}
                  placeholder="显示风险等级"
                  style={{ width: '150px', margin: '0 10px' }}
                />
                {i.riskLevel !== 1 && (
                  <Input
                    defaultValue={i.inspectType !== 1 ? i.details[0].remark : ''}
                    disabled={i.inspectType !== 1 || !!view}
                    style={{ width: '320px' }}
                    maxLength={200}
                    onChange={(e) => {
                      let newData = iup.deepCopy(data);
                      newData[index].remark = e.target.value;
                      setData(newData);
                    }}
                  />
                )}
              </div>
            </Layout.Flex>
          ))
        : ''}
      {statisticsApprovalPoint && (
        <div style={{ marginTop: '50px' }}>
          <label>审批要点统计</label>
          <div>
            <span style={{ color: '#red' }}>
              高<span style={{ color: '#000000', padding: '0 10px' }}>{statisticsApprovalPoint.highRisk}</span>
            </span>
            <span style={{ color: '#FE890C' }}>
              中<span style={{ color: '#000000', padding: '0 10px' }}>{statisticsApprovalPoint.mediumRisk}</span>
            </span>
            <span style={{ color: '#0081CC' }}>
              低<span style={{ color: '#000000', padding: '0 10px' }}>{statisticsApprovalPoint.lowRisk}</span>
            </span>
            <span style={{ color: '#00CC33' }}>
              无风险<span style={{ color: '#000000', padding: '0 10px' }}>{statisticsApprovalPoint.riskFree}</span>
            </span>
          </div>
        </div>
      )}
    </Layout>
  );
}
